<template>
  <div class="chooseLinkComponent" v-if="oItem">
    <span class="title">{{ oItem.title }}</span>
    <div class="right">
      <div class="chooseUrl">
        <div class="urlBox">
          <div class="haveUrl" v-if="oItem.linkName || oItem.linkUrl">
            <el-button plain disabled class="haveUrlBtn">
              <i class="el-icon-paperclip"></i>
              <span>{{ oItem.linkName || oItem.linkUrl || "" }}</span>
            </el-button>
            <el-button
              type="text"
              class="updateHref"
              @click="rightListButtonUpdateLinkHref"
              >修改</el-button
            >
          </div>
          <div class="noUrl" v-else>
            <el-button
              plain
              class="noUrlBtn"
              @click="rightListButtonAddLinkHref"
            >
              <i class="el-icon-paperclip"></i>
              选择链接
            </el-button>
          </div>
        </div>
      </div>
    </div>
    
    
    
  </div>
</template>
<script>
import { mapState } from "vuex";
import Bus from "@/utils/bus";
export default {
  name: "chooseLinkComponent",
  data() {
    return {
      oItem: null,
      //为了防止页面初始化时，触发不必要的通知更新，此处设置标识符，初始化后2秒置为true
      needUpdate: false,
    };
  },
  props: ["item", "rightIndex", "catalogIndex", "ocIndex", "id"],
  // import引入的组件, 需要注入到对象中才能使用
  components: {},
  // 生命周期 - 创建完成, 可以访问当前this实例
  created() {},
  // 生命周期 - 挂载完成, 可以访问DOM元素
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
    setTimeout(() => {
      this.needUpdate = true;
    }, 1000);
    Bus.$off(`chooseLinkAfter${this.id}`);
    Bus.$on(`chooseLinkAfter${this.id}`, (params) => {
      this.oItem.linkName = params.name;
      this.oItem.linkUrl = params.url;
      this.updateParentHandle(params);
    });
    //由于同一组件中的子组件，并列渲染时采用同一公共组件时，最后一个组件会把前面相同组件注册的事件覆盖，这里先判断，再注册，避免覆盖的问题
    //事件被覆盖之后，会导致在前面选择的链接，只赋值给了最后一个组件，因此这里先判断再注册很有必要。setLink同理。
    if (this.item.ename === "authLink") {
      Bus.$off(`chooseAuthLinkAfter${this.id}`);
      Bus.$on(`chooseAuthLinkAfter${this.id}`, (params) => {
        if (params.ename === "authLink" && this.oItem.ename === "authLink") {
          this.oItem.linkName = params.name;
          this.oItem.linkUrl = params.url;

          if (this.needUpdate) {
            let needUpdateMainChild = true;
            let row = {
              value: params.name + "__vlon__" + params.url,
              ename: "authLink",
              rightIndex: this.rightIndex,
              catalogIndex: this.catalogIndex,
              needUpdateMainChild: needUpdateMainChild,
              needUpdateMain: false,
            };
            this.$emit("updateParent", JSON.stringify(row));
          }
        }
      });
    }
    if (this.item.ename === "setLink") {
      Bus.$off(`chooseSetLinkAfter${this.id}`);
      Bus.$on(`chooseSetLinkAfter${this.id}`, (params) => {
        if (params.ename === "setLink" && this.oItem.ename === "setLink") {
          this.oItem.linkName = params.name;
          this.oItem.linkUrl = params.url;
          if (this.needUpdate) {
            let needUpdateMainChild = true;
            let row = {
              value: params.name + "__vlon__" + params.url,
              ename: "setLink",
              rightIndex: this.rightIndex,
              catalogIndex: this.catalogIndex,
              needUpdateMainChild: needUpdateMainChild,
              needUpdateMain: false,
            };
            this.$emit("updateParent", JSON.stringify(row));
          }
        }
      });
    }
  },
  //方法集合
  methods: {
    init() {
      if (this.item) {
        this.oItem = null;
        this.$nextTick(() => {
          this.oItem = JSON.parse(JSON.stringify(this.item));
        });
      }
    },
    //修改链接
    rightListButtonUpdateLinkHref() {
      //console.log(JSON.stringify(this.item));
      let name = "chooseLink";
      if (this.item.ename == "authLink") {
        name = "authLink";
      } else if (this.item.ename == "setLink") {
        name = "setLink";
      }
      Bus.$emit("openChooseLinkGroup", {
        name: name,
        controlid: this.id,
      });
    },
    //选择链接
    rightListButtonAddLinkHref() { console.log("click choose link", this.item.ename);
      let name = "chooseLink";
      if (this.item.ename == "authLink") {
        name = "authLink";
      } else if (this.item.ename == "setLink") {
        name = "setLink";
      }
      Bus.$emit("openChooseLinkGroup", {
        name: name,
        controlid: this.id,
      });
    },
    //更新到父组件
    updateParentHandle(params) {
      if (this.needUpdate) {
        let needUpdateMainChild = true;
        let row = {
          value: params.name + "__vlon__" + params.url,
          ename: this.item.ename,
          rightIndex: this.rightIndex,
          catalogIndex: this.catalogIndex,
          needUpdateMainChild: needUpdateMainChild,
          needUpdateMain: false,
        };
        this.$emit("updateParent", JSON.stringify(row));
      }
    },
  },
  // 监听属性, 类似于data概念
  computed: mapState(["decorate"]),
  // 监听data中的数据变化
  watch: {},
  //如果页面有keep-alive缓存功能, 这个函数会触发
  activated() {},
  // 生命周期 - 销毁之前
  beforeDestroy() {},
  // 生命周期 - 销毁完成
  destroyed() {},
};
</script>
<style scoped lang="scss">
.chooseLinkComponent {
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  .title {
    width: 100px;
    display: flex;
    justify-content: flex-end;
    padding-right: 10px;
    font-size: 12px;
    box-sizing: border-box;
  }
  .right {
    width: calc(100% - 100px);
    align-items: center;
    display: flex;
    .chooseUrl {
      display: flex;
      flex: 1;
      flex-direction: column;
      .urlBox {
        .haveUrl {
          position: relative;
          .haveUrlBtn {
            padding: 0;
            height: 32px;
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding-left: 30px;
            box-sizing: border-box;
            position: relative;
            i {
              border-right: 1px solid transparent;
              height: 32px;
              display: flex;
              box-sizing: border-box;
              align-items: center;
              justify-content: center;
              position: absolute;
              width: 30px;
              top: 0;
              left: 0;
              z-index: 2;
            }
            &:hover {
              i {
                border-color: #eee;
              }
            }
          }

          .updateHref {
            padding: 0;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 2;
            height: 32px;
            display: flex;
            align-items: center;
            width: 60px;
            justify-content: center;
            border-radius: 0;
            border-left: 1px solid #eee;
          }
        }
        .noUrl {
          .noUrlBtn {
            padding: 0;
            height: 32px;
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding-left: 30px;
            box-sizing: border-box;
            position: relative;
            i {
              height: 32px;
              display: flex;
              box-sizing: border-box;
              align-items: center;
              justify-content: center;
              position: absolute;
              width: 30px;
              top: 0;
              left: 0;
              z-index: 2;
            }
          }
        }
      }
    }
  }


}
</style>

